<template>
	<view style="display: flex;justify-content: center;padding:40px 0;">
		<canvas canvas-id="radarCanvas" id="radarCanvas" style="width:300px; height: 300px;"></canvas>
		<!-- <image :src="src" style="width: 100%;" mode="widthFix"></image> -->
	</view>
</template>

<script>
	export default {
		name:'qq-ld',
		data() {
			return {
				src: '',
			}
		},
		mounted() {

			this.drawRadarChart();

		},
		methods: {

			drawRadarChart() {

				const ctx = uni.createCanvasContext('radarCanvas');
				const width = 100;
				const height = 100;
				const centerX = 150;
				const centerY = 150;
				const data = [5,3.5,5,3.5,5,3.5,5,3.5,5,3.5]; // 示例数据
				const labels = ['火烧', '泡水', '事故', '外观', '部件','火烧', '泡水', '事故', '外观', '部件'];
				const colors = ['#cacaca', '#cacaca', '#D6D6D6', '#E6E6E6', '#F6F6F6'];
				const maxScore = 5; // 数据最大值

				const angleStep = (2 * Math.PI) / labels.length;

				// 绘制背景多边形
				ctx.setLineWidth(1);
				ctx.setStrokeStyle('#F6F6F6');



				//底部圆盘
				ctx.beginPath();
				ctx.arc(centerX, centerY, width, 0, 2 * Math.PI);
				ctx.setFillStyle('#F6F6F6');
				ctx.closePath();
				ctx.fill();


				//多边形圈
				for (let i = 5; i > 0; i--) {
					ctx.setStrokeStyle(colors[i - 1]);
					ctx.setFillStyle(colors[i - 1]);
					ctx.beginPath();
					labels.forEach((label, index) => {
						const x = centerX + (width / 5) * i * Math.cos(angleStep * index - Math.PI / 2);
						const y = centerY + (height / 5) * i * Math.sin(angleStep * index - Math.PI / 2);
						if (index === 0) {
							ctx.moveTo(x, y);
						} else {
							ctx.lineTo(x, y);
						}
					});
					ctx.closePath();
					ctx.fill();
					ctx.stroke();
				}

				//竖线
				labels.forEach((label, index) => {

					ctx.setStrokeStyle('#EDEDED');
					ctx.setFillStyle('#EDEDED');
					ctx.beginPath();

					const x1 = centerX + (width * 0.6) * Math.sin(angleStep * index);
					const y1 = centerY + (height * 0.6) * Math.cos(angleStep * index);
					const x = centerX + (width) * Math.sin(angleStep * index);
					const y = centerY + (height) * Math.cos(angleStep * index);

					ctx.moveTo(x1, y1);
					ctx.lineTo(x, y);

					ctx.closePath();
					ctx.stroke();

				});



				// 绘制雷达图数据
				ctx.setStrokeStyle('rgba(11,200,200,1)');
				ctx.setFillStyle('rgba(11,200,200, 0.34)');
				ctx.setLineWidth(2);
				ctx.beginPath();
				data.forEach((score, index) => {
					const x = centerX + (width * (score / maxScore)) * Math.cos(angleStep * index - Math.PI / 2);
					const y = centerY + (height * (score / maxScore)) * Math.sin(angleStep * index - Math.PI / 2);
					if (index === 0) {
						ctx.moveTo(x, y);
					} else {
						ctx.lineTo(x, y);
					}
				});
				ctx.closePath();
				ctx.fill();
				ctx.stroke();

				// 绘制标签
				ctx.setTextAlign('center');



				labels.forEach((label, index) => {
					const x = centerX + (width + 30) * Math.cos(angleStep * index - Math.PI / 2);
					const y = centerY + (height + 26) * Math.sin(angleStep * index - Math.PI / 2);

					//标题
					ctx.setFillStyle('#000');
					ctx.setFontSize(14);
					ctx.font = 'bold 14px sans-serif'
					ctx.fillText(label, x, y);

					ctx.setFillStyle('#A2A4A2');
					ctx.font = '12px sans-serif'
					ctx.setFontSize(12);
					ctx.fillText(data[index], x, y + 16);
					
				});

				ctx.draw();

				//转图片
			
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: 420,
					height: 420,
					destWidth: 840,
					destHeight: 840,
					canvasId: 'radarCanvas',
					success: (res) => {
						// 在H5平台下，tempFilePath 为 base64
						this.src = res.tempFilePath;
					}
				})
			}
		}
	};
</script>

<style>

</style>